wychmirefandomcom-20200214-history
Coding Guide Neo/Basics
CGNeo Basic's outline+setup: *; (1) Introduction *: "hello, this is the coding guide, hope you have a great time!" etc etc not actually like that but yeah **; (1.1) Note on source mode **: Since you must use source mode to code this note is kinda needed. A brief explanation on how to use source mode in the evil thing called the Visual Editor if you really must use it. *; (2) Wikitext overview *: what wikitext is, italics, bold, headings yadayada ** Possibly a tabber here, first tab goes over the above stuff, second tab goes over things like tables, templates (express note about you do not get to make your own template without permission from a mod), and images/galleries/slideshows. *; (3) HTML overview *: same as (2) but with html tags. So you get stuff about italics, bold, underline, headings. ** If (2) has a tabber than (3) gets one too, this one about html tables and maybe describing span, p, div **; (3.1) Obsolete Tags **: big, center, and font are the most commonly used obsolete tags. *; (4) divs *: Now for the fun stuff. We get backgrounds, borders, margins, everything! **; (4.1) box model **: what it is, how margins, padding, and borders change the size of boxes **; (4.2) backgrounds **: detailed overview about of backgrounds, single colors, linear gradients, and radial gradients. **; (4.3) borders **: border styles, border widths, how to apply things to only one side, how to have multiple border styles, etc **; (4.4) color **: tbh I hate to give how to color text its own section but thats just how its gonna be **; (4.5) width and height **: brief overview of how width's and heights work, how they react to paddings and margins **; (4.6) margins and padding **: brief overview of margins and padding. Introduction Introduce people to what coding is, give examples, try to do it in a way that everyone won't feel lost but also understand what exactly we as coders do. Note on editing As editors on FANDOM, we have access to three separate editing modes. The VisualEditor (Default for new accounts), the Classic Rich-text Editor (Default for old accounts), and the Source Editor (What most coders use). When editing code be sure to use the Source Editor as your main editor as both the Visual Editor and the Classic Rich-text Editor can cause issues. This can be solved by wrapping your code in a tag. See section (3) for more information. Coding with the VisualEditor This method is not recommended! Please use the Source Editor or the Classic Rich-text Editor if possible. # Click the the edit button in the upper right corner of a page. # Click the hamburger-menu dropdown to the left of the Save and Cancel buttons # Select "Source Editor" from the dropdown and start coding! Coding with the Classic Rich-text Editor # Mouse over the dropdown arrow to the right of the the edit button in the upper right corner of a page. # Click on "Source editor" in the menu that appears. # Select the "Source" tab at the top of the page and start coding! :Note: If there is already complex coding on your page, the Classic Rich-text Editor will auto switch to the Source Editor for you. Switching to the Source Editor # Mouse over your profile picture in the floating header. # Select "My Preferences" in the dropdown that shows up. # Click on the Editing tab and then select the Preferred Editor dropdown. # Select Source Editor and then scroll down to the bottom of the page and hit "save". Wikitext Overview |-|What is Wikitext?= Wikitext is a simple, easy to use markup language that gets translated to HTML after you publish the page. You can italicize, bold, make headings and links, and create bullet points, among other things. See for an in-depth look. The next tab includes some basic ways you can style your text. The third tab shows you how to make images and tables. |-|Basic Wikitext= ; Bold Text : HTML equivalent: . Bold Text results in Bold Text ; Italic Text : HTML equivalent: . Italic Text results in Italic Text ; Bold and Italic Text : HTML equivalent: and . Bold and Italic Text results in Bold and Italic Text ; Bulleted list All bullet points created with Wikitext are square, though you can make circular bullet points using HTML. : HTML equivalent: wrapped inside a . * Item 1 * Item 2 * Item 3 results in * Item 1 * Item 2 * Item 3 ; Numbered list : HTML equivalent: wrapped inside a . # Item 1 # Item 2 # Item 3 results in # Item 1 # Item 2 # Item 3 ; Description Lists Wikitext description lists are made with ";" (html's ) and ":" (html's ). These characters must be the first letter on the line to funtion. : HTML equivalent: (;) and (:) wrapped inside a . ; Term : Detail 1 : Detail 2 :: Nested Detail ; Another Term ; Yet another term : Detail results in ; Term : Detail 1 : Detail 2 :: Nested Detail ; Another Term ; Yet another term : Detail ; Headings Refrain from using a single "=" (Level 1 heading) as it is styled as the article title and should not be used within an article. : HTML equivalent: - . = Level 1 = Level 2 Level 3 Level 4 Level 5 = Level 6 = results in = Level 1 = Level 2 Level 3 Level 4 Level 5 = Level 6 = ; Horizontal Rule results in See Wikipedia's Help:Wikitext page for a more in-depth look at wikitext and the html equivalents. |-|Advanced Wikitext= ; Image Syntax : options|caption : Options: :: Size ::: {WIDTH}''px - Defines the width of the image without restricting the height. The width:height ratio will be kept, so reducing the width will reduce height as well. ::: x{HEIGHT}px - Defines the height of the image without restricting the width. The width:height ratio will be kept, so reducing the height will reduce width as well. ::: ''{WIDTH}''x{HEIGHT}px - Defines the width and the height of the image. Because ratio is kept, there is no real reason to use this over one of the above methods. :: ''Horizontal Alignment ::: left - Aligns the image to the left side of the page ::: right - Aligns the image to the right side of the page ::: center - Aligns the image to the center of the page :: Links ::: link=''{PAGENAME}'' - Gives the image a link. Can either be a page name (e.g. MudWings) or an actual website (e.g. http://example.com). If left blank (just link=) the image will link to nowhere and the lightbox does not appear when the image is clicked and the caption does not show up when mousing over the image. :: Thumb ::: thumb - When the thumb option is added the image is shrunk and floats to the right side of the page. The caption appears as text beneath the image. : Caption: :: A short blurb about the image. When thumb is set the caption appears as text underneath the image. If it is not set the caption appears when you mouse over the image, but doing so does not work when link= is left blank. ; Tables //TODO: rewrite this part so it just displays what to do and what it does. No talking to the reader. Wikitext tables are made up of pipes So both of the following tables result in the same output. results in Note the lack of defined tables cells; there are no borders visually separating anything. We'll get to that below. ; Styling tables To style a table add the style="" attribute after the starting curly bracket and pipe. results in The table still has nothing separating the individual cells, though there is now a border around the table itself. To add borders around each cell add a style="" attribute after the cell's pipe, and then another pipe. Like so: results in There are now borders around each cell, though the result is rather unappealing to the eye. To fix this, add the border-collapse: collapse; property to the table's style attribute results in Add the HTML Overview See Wikipedia's HTML Elements page for a more in-depth look at exactly which tags Wikia supports and what they do. Note that Wikia uses a custom version of MediaWiki 1.19, so not all tags listed on that page work here. A brief list of tags that do work is at HTML Description lists are made up of two parts: the (Description term) and the (Description details), both of which are enclosed by a (Description list) Obsolete Tags * ' ‐ A tag that uses the font-size: property should be used instead. eg, * ' ' ‐ A or a tag that uses the text-align: center; property should be used instead. * ' ‐ A , , or tag that uses the font-family: {FONT NAME}; and color: {COLOR CODE}; properties should be used instead. * '' ‐ The tag should be used instead. Divs The Box Model Backgrounds Borders Color The color: property changes the color of text inside the tag. ; Syntax: : color: {COLOR}; with {COLOR} being a hex code, rgb code, or an x11 color. : Examples: :: Lorem Ipsum: Lorem Ipsum :: Lorem Ipsum: Lorem Ipsum :: Lorem Ipsum: Lorem Ipsum Width and Height Width The width property sets an elements width. ; Syntax : width: {WIDTH} with {WIDTH} being a number value in pixels (px) or percentages (%). : The default width is auto, meaning that if you forget to set, or don't set width the div take up all available space. : Examples: :: Lorem Ipsum : Lorem Ipsum :: Lorem Ipsum : Lorem Ipsum :: Lorem Ipsum : Lorem Ipsum In most cases the maximum width you want to use is 704px since FANDOM dynamically scales the width to the size of your browser, the smallest being 704px Height The height property sets an elements width. ; Syntax : height: {HEIGHT} with {HEIGHT} being a number value in pixels (px) or percentages (%). : Examples: :: Lorem Ipsum : Lorem Ipsum :: Lorem Ipsum : Lorem Ipsum Margins and Padding Other Resources * Interneting Is Hard: An amazing guide to the basics of HTML and CSS coding, it is easy to understand and learn from while at the same time explains some of the more complex things like Flex and Positioning.